import React, { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import { ROOM_BOUNDS } from './walls';

const Lighting: React.FC = () => {
  const pointLightRef = useRef<THREE.PointLight>(null);
  const spotLightRef = useRef<THREE.SpotLight>(null);

  const { W, L } = ROOM_BOUNDS;
  const washPositions = useMemo(() => {
    const margin = 1;
    const step = 2.5;
    const arr: number[] = [];
    for (let z = -L / 2 + margin; z <= L / 2 - margin; z += step) arr.push(Number(z.toFixed(2)));
    return arr;
  }, [L]);

  useFrame((state) => {
    if (pointLightRef.current) {
      // 动态改变点光源颜色
      const time = state.clock.elapsedTime;
      pointLightRef.current.color.setHSL(
        (Math.sin(time * 0.5) + 1) * 0.5, // 色相在0-1之间变化
        0.8, // 饱和度
        0.6  // 亮度
      );
    }

    if (spotLightRef.current) {
      // 聚光灯的呼吸效果
      const intensity = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.3;
      spotLightRef.current.intensity = intensity;
    }
  });

  return (
    <>
      {/* 画廊基调：中性偏暖环境光与柔和半球光 */}
      <ambientLight intensity={0.5} color="#bbb8b3" />
      <hemisphereLight args={[0xfff2df, 0x666666, 0.5]} />
      
      {/* 主方向光 */}
      <directionalLight
        position={[10, 12, 5]}
        intensity={1.1}
        color="#fff3e0"
        castShadow
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
      />

      {/* 动态点光源 - 中央 */}
      <pointLight
        ref={pointLightRef}
        position={[0, 3, 0]}
        intensity={2.5}
        distance={30}
        decay={2}
        color="#00ffff"
      />

      {/* 聚光灯 - 主展示区 */}
      {/* 顶部柔和主光（画廊感） */}
      <spotLight
        ref={spotLightRef}
        position={[0, 9, 0]}
        target-position={[0, 0, 0]}
        intensity={1.2}
        angle={Math.PI / 3}
        penumbra={0.9}
        color="#fff1e0"
        castShadow
      />

      {/* 洗墙灯带：沿左右墙均匀投射（基于房间尺寸） */}
      {washPositions.map((z, i) => (
        <spotLight key={`rw-${i}`} position={[W/2 - 0.4, 2.8, z]} angle={0.7} penumbra={1} intensity={0.9} color="#fff2e6" target-position={[W/2 - 0.4, 1.2, z]} />
      ))}
      {washPositions.map((z, i) => (
        <spotLight key={`lw-${i}`} position={[-W/2 + 0.4, 2.8, z]} angle={0.7} penumbra={1} intensity={0.9} color="#fff2e6" target-position={[-W/2 + 0.4, 1.2, z]} />
      ))}

      {/* 区域1 - AI展示区灯光 */}
      <spotLight position={[-8, 7, 0]} intensity={1.2} angle={0.9} penumbra={0.8} color="#00ff88" />

      {/* 区域2 - 量子计算区灯光 */}
      <spotLight position={[8, 7, 0]} intensity={1.2} angle={0.9} penumbra={0.8} color="#ff0088" />

      {/* 区域3 - 生物科技区灯光 */}
      <spotLight position={[0, 7, -8]} intensity={1.2} angle={0.9} penumbra={0.8} color="#88ff00" />

      {/* 区域4 - 太空科技区灯光 */}
      <spotLight position={[0, 7, 8]} intensity={1.2} angle={0.9} penumbra={0.8} color="#0088ff" />

      {/* 边缘装饰光带 */}
      <pointLight
        position={[-12, 1, 0]}
        intensity={0.5}
        distance={15}
        color="#00ffff"
      />
      <pointLight
        position={[12, 1, 0]}
        intensity={0.5}
        distance={15}
        color="#00ffff"
      />
      <pointLight
        position={[0, 1, -12]}
        intensity={0.5}
        distance={15}
        color="#00ffff"
      />
      <pointLight
        position={[0, 1, 12]}
        intensity={0.5}
        distance={15}
        color="#00ffff"
      />
    </>
  );
};

export default Lighting;
